<template>
  <div id="app" class="app">
    <router-view :class="{ 'view-wrap': isController }"></router-view>
    <music-controller class="player" v-show="isController"></music-controller>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import musicController from "./components/musicController.vue";
import { namespace } from "vuex-class";

const AppModule = namespace("app");
@Component({
  components: {
    musicController,
  },
})
export default class AppComponent extends Vue {
  // 是否显示播放器。从vuex的state中取值
  @AppModule.State("isController")
  public isController: boolean;
}
</script>

<style lang="scss">
@import "./assets/scss/googleapis-icon.scss";
.player {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f9fafc;
}
.view-wrap {
  padding-bottom: 0.8rem;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
